<template>
  <div class="loginBody">
      <div class="loginDiv">
          <div class="=login-content">
              <h1 class="login-title">用户登录</h1>
              <el-form :model="loginForm" lable-width="100px"
                       :rules="rules" ref="loginForm">
                  <el-form-item label="账号" prop="loginName" style="padding-left: 110px; ">
                      <el-input style="width: 200px; margin-left: -80px" type="text" v-model="loginForm.loginName"
                                autocomplete="off" size="small" ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password" style="padding-left: 110px; ">
                      <el-input style="width: 200px;margin-left: -80px " type="password" v-model="loginForm.password"
                                show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="confirm" :disabled="confirm_disable">确 定</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </div>
  </div>

</template>

<script>
export default {
    name: "LoginPage",
    data(){
        return{
            confirm_disable:false,
            loginForm:{
                loginName:'',
                password:'',
            },
            rules:{
                loginName:[
                    {required:true,message:'请输入账号',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'}
                ],
            },
        }
    },
    methods:{

        confirm(){
            this.confirm_disable=true;
            this.$refs.loginForm.validate((valid)=>{
                if(valid){
                    //验证数据库
                    this.$axios.post('http://localhost:8090/user/login',this.loginForm).then(res=>res.data).then(res=>{
                        console.log(res)
                        if(res.code==200){
                            //储存
                            sessionStorage.setItem("CurUser",JSON.stringify(res))
                            //跳转到主页
                            this.$router.replace('/IndexPage');
                            this.$message({
                                type:'success',
                                message:'登录成功',
                            })
                        }else {
                            this.confirm_disable=false;
                            alert('用户名或密码错误!');
                            return false;
                        }
                    });
                }else {
                    this.confirm_disable=false;
                    console.log('校验失败')
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped>
.loginBody{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #B3C0D1;
}
.loginDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    width: 450px;
    height: 330px;
    background: #fff;
    border-radius: 5%;
}
.login-title{
    margin:20px 0;
    text-align: center;
}
.login-content{
    width: 400px;
    height: 250px;
    position: absolute;
    top: 25px;
    left: 25px;
  }

</style>